<template>
  <div class="box">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="main">
      <slot v-bind:obj="obj"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "com",
  data: () => {
    return {
      obj: {
        name: "zhangsan",
        age: 20,
      },
    };
  },
};
</script>

<style lang='stylus' scoped>
.box {
  height: 300px;
  background-color: greenyellow;
}
</style>
